<template>
  <el-select v-bind="otherProps" clearable @change="handleSelect" filterable>
    <el-option v-for="option in selectOptions" :key="option.value" :label="option.label" :value="option.value"></el-option>
  </el-select>
</template>

<script setup name="RSelect">

import {ref} from "vue";
import {getDicts} from "@/api/system/dict/data";

const emit = defineEmits(['update:labelValue'])

const props = defineProps({
  fieldProps: Object,
  placeholder: String
})

const {optionType, options, dict, ...otherProps} = props.fieldProps

const selectOptions = ref()

function getOptions(){
  if(optionType === 'custom'){
    selectOptions.value = options
  }else if(optionType === 'dict'){
    getDicts(dict).then(res => {
      const arr = []
      if(res.data){
        res.data.forEach(dict => {
          arr.push({
            label: dict.dictLabel,
            value: dict.dictValue
          })
        })
        selectOptions.value = arr
      }
    })
  }
}

function handleSelect(val){
  if(selectOptions.value && selectOptions.value.length){
    const find = selectOptions.value.filter(s=>s.value === val)
    if(find && find.length){
      const label = find[0].label
      emit('update:labelValue', label)
    }else{
      emit('update:labelValue', '')
    }
  }

}

getOptions()

</script>

<style scoped>

</style>
